<template>
  <div v-if="patient" class="container">
    <div class="header">影像检查</div>

    <div class="filters">
      <button class="filter-btn active">今天</button>
      <button class="filter-btn">本周</button>
      <button class="filter-btn">本月</button>
      <button class="filter-btn custom">
        <i class="fa fa-calendar"></i> 自定义
      </button>
    </div>

    <div class="card-grid">
      <div class="card">
        <div class="icon icon-brain">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M8 12h8"></path>
            <path d="M12 8v8"></path>
          </svg>
        </div>
        <div class="card-title">CT</div>
        <div class="card-count">{{patient.imaging_exams.summary.CT}}</div>
      </div>
      <div class="card">
        <div class="icon icon-mri">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
            <line x1="4" y1="22" x2="4" y2="15"></line>
          </svg>
        </div>
        <div class="card-title">MRI</div>
        <div class="card-count">{{patient.imaging_exams.summary.MRI}}</div>
      </div>
      <div class="card">
        <div class="icon icon-ultrasound">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M2 12h2"></path>
            <path d="M6 12h2"></path>
            <path d="M10 12h2"></path>
            <path d="M18 6l-6 6 6 6"></path>
          </svg>
        </div>
        <div class="card-title">B 超</div>
        <div class="card-count">{{patient.imaging_exams.summary.Ultrasound}}</div>
      </div>
      <div class="card">
        <div class="icon icon-xray">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="8" y1="12" x2="16" y2="12"></line>
          </svg>
        </div>
        <div class="card-title">X 光</div>
        <div class="card-count">{{patient.imaging_exams.summary.X_ray}}</div>
      </div>
    </div>

    <div class="exam-list">
      <div v-for="exam in patient.imaging_exams.recent_exams" class="exam-item">
        <div class="exam-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="8" y1="12" x2="16" y2="12"></line>
          </svg>
        </div>
        <div class="exam-content">
          <div class="exam-title">{{exam.exam_type}}</div>
          <div class="exam-info">
            <div>
              <i class="fa fa-calendar"></i>{{exam.date}}
            </div>
            <div>
              <i class="fa fa-user-md"></i>{{exam.doctor}}
            </div>
            <div>
              <i class="fa fa-hospital"></i> {{exam.department}}
            </div>
          </div>
        </div>
        <div :class="getStatus(exam.status)">{{exam.status}}</div>
<!--        <div class="arrow">-->
<!--          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--            <polyline points="9 18 15 12 9 6"></polyline>-->
<!--          </svg>-->
<!--        </div>-->
      </div>
    </div>

<!--    <div class="stats-section">-->
<!--      <div class="stats-title">检查统计</div>-->

<!--      <div class="stats-grid">-->
<!--        <div class="chart-container">-->
<!--          <div class="chart-title">检查类型分布</div>-->
<!--          <canvas id="typeChart" width="100%" height="150"></canvas>-->
<!--        </div>-->

<!--        <div class="chart-container">-->
<!--          <div class="chart-title">检查趋势</div>-->
<!--          <canvas id="trendChart" width="100%" height="150"></canvas>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import {getPatientById} from '@/demo-data/data/imageCheck.js';
import {useRouter, useRoute} from 'vue-router'

const router = useRouter()  // 用于编程式导航
const route = useRoute()    // 用于获取当前路由信息

const patient = ref()

onMounted(() => {
  //根据路由传入的患者id查询某个患者的本页数据
  if (route.query.patientId) {
    patient.value = getPatientById(route.query.patientId);
    console.log(patient.value, "patient.value")
  }
})

function getStatus(text){
  if(text.includes("正")){
    return "exam-status status-completed"
  }else{
    return "exam-status status-pending"
  }
}



</script>

<style scoped>
body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  font-size: 18px;
  font-weight: bold;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  background-color: #f0f2f5;
  color: #333;
}

.filter-btn.active {
  background-color: #1890ff;
  color: white;
}

.filter-btn.custom {
  display: flex;
  align-items: center;
}

.filter-btn.custom i {
  margin-right: 5px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.card {
  background-color: white;
  border-radius: 6px;
  padding: 20px 15px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #1890ff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-heart {
  color: #1890ff;
}

.icon-brain {
  color: #1890ff;
}

.icon-mri {
  color: #1890ff;
}

.icon-ultrasound {
  color: #1890ff;
}

.icon-xray {
  color: #1890ff;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-count {
  font-size: 12px;
  color: #999;
}

.exam-list {
  margin-bottom: 30px;
}

.exam-item {
  display: flex;
  background-color: white;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  position: relative;
}

.exam-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #e6f7ff;
  color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.exam-content {
  flex: 1;
}

.exam-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.exam-info {
  display: flex;
  font-size: 12px;
  color: #999;
}

.exam-info div {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.exam-info i {
  margin-right: 5px;
  font-size: 14px;
}

.exam-status {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

.status-completed {
  color: #52c41a;
}

.status-pending {
  color: #faad14;
}

.status-abnormal {
  color: #f5222d;
}

.arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
}

.stats-section {
  margin-top: 30px;
}

.stats-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-container {
  height: 200px;
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.chart-title {
  font-size: 14px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
